<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>选择身份</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .search-close {
            height: 30px;
            margin: 15px;
            background: rgba(255, 255, 255, 0.26);
            border-radius: 20px;
        }

        .search-close .search-icon {
            width: 17px;
            height: 16px;
            margin-right: 6px;
        }

        .search-close .search-text {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .container {
            margin: 15px;
            padding: 10px 10px 0 10px;
            background:rgba(255,255,255,1);
            box-shadow:0px 4px 10px 0px rgba(0,135,214,0.37);
            border-radius:10px;
        }

        .row {
            position: relative;
            height: 50px;
        }

        .row::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgb(212,212,212);
            transform: scaleY(0.5);
        }

        .row:last-child::after {
            display: none;
        }

        .radio {
            width: 22px;
            height: 22px;
            -webkit-appearance: none;
            background: url("../../image/ui/radio.png");
            background-size: 100% 100%;
        }

        .radio:checked {
            background: url("../../image/ui/checked.png");
            background-size: 100% 100%;
        }

        .name {
            font-size:15px;
            font-weight:500;
            color:rgba(25,25,25,1);
        }

        .search-open {
            height:30px;
            background:rgba(255,255,255,0.26);
            border-radius:20px;
        }

        .cancel {
            font-size:15px;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin-left: 15px;
        }


        .search-open .search-icon {
            width: 15px;
            height: 15px;
            margin-left: 15px;
        }

        .search-open .form-text {
            font-size:14px;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-indent: 6px;
        }

        .search-open .form-text::placeholder {
            line-height: 1.4;
            font-size:14px;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-indent: 6px;
        }

        .search-wrapper {
            margin: 15px;
        }

        .tips {
            font-size:14px;
            color:rgba(25,25,25,1);
            padding-bottom: 10px;
        }
    </style>
</head>

<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="search-close" v-show="state === 1" data-flex="main:center cross:center" @click="state = 2">
            <div class="search-icon">
                <img src="../../image/ui/search.png" alt="">
            </div>
            <div class="search-text">搜索</div>
        </div>
        <div class="search-wrapper" v-if="state === 2" data-flex="cross:center">
            <div class="search-open" data-flex-box="1" data-flex="cross:center">
                <div class="search-icon">
                    <img src="../../image/ui/search.png" alt="">
                </div>
                <input v-model="keyword" autofocus class="form-text" data-flex-box="1" type="text" placeholder="搜索">
            </div>
            <div class="cancel" @click="state = 1; keyword = '';">
                取消
            </div>
        </div>
        <div class="container">
            <div class="tips" data-flex="main:center cross:center" v-show="tips">未找到任何数据</div>
            <div class="row" v-for="item,index in resultList" data-flex="main:justify cross:center">
                <div class="name">{{ item.schoolName }}</div>
                <input class="radio" type="radio" :data-value="index" name="school">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script>
    var $S;
    var USER;
    var pageParam = {};
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        pageParam = api.pageParam;
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                // 搜索框的状态
                state: 1,
                // 搜索的关键字
                keyword: '',
                // 是否显示提示
                tips: false,
                // 学校数据
                resultList: [],
                listData: []
            },
            watch: {
                keyword: function() {
                    var keyword = this.keyword;
                    this.resultList = this.listData.filter(function(item) {
                        return item.schoolName.indexOf(keyword) !== -1;
                    })
                },
                resultList: function() {
                    if(this.resultList.length === 0) {
                        this.tips = true;
                    } else {
                        this.tips = false;
                    }
                }
            }
        });
        getPageData();
    }

    function getPageData() {
        var url = 'common/findList';
        var params = pageParam.addressCode;
        params.entityName = 'clsMemberSchool';
        var callback = function(data) {
            vm.listData = data.listData;
            vm.resultList = deepCopy(vm.listData);
        };
        POST(url, params, callback);
    }

    function handleComfirm() {
        var sel = $('input:radio:checked').attr('data-value');
        if(sel) {
            var item = vm.resultList[sel];
            api.sendEvent({
                name: 'select_school',
                extra: {
                    schoolName: item.schoolName,
                    schoolId: item.id
                }
            });
            setTimeout(function() {
                api.closeWin();
            }, 200);
        } else {
            fnToast('请选择学校');
        }
    }
</script>


</html>